<template>
  <div class="application-review">
    <div class="page-header">
      <h2>申请审核</h2>
      <div class="header-actions">
        <el-button type="success" @click="handleBatchApprove" :disabled="multiple">
          <i class="el-icon-check"></i> 批量通过
        </el-button>
        <el-button type="danger" @click="handleBatchReject" :disabled="multiple">
          <i class="el-icon-close"></i> 批量拒绝
        </el-button>
        <el-button type="warning" @click="handleBatchInterview" :disabled="multiple">
          <i class="el-icon-edit"></i> 批量面试
        </el-button>
      </div>
    </div>

    <!-- 搜索区域 -->
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
      <el-form-item label="学生姓名" prop="studentName">
        <el-input
          v-model="queryParams.studentName"
          placeholder="请输入学生姓名"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="申请状态" prop="status">
        <el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
          <el-option label="待审核" value="0" />
          <el-option label="面试中" value="1" />
          <el-option label="已通过" value="2" />
          <el-option label="已拒绝" value="3" />
          <el-option label="已取消" value="4" />
        </el-select>
      </el-form-item>
      <el-form-item label="招新标题" prop="recruitmentTitle">
        <el-input
          v-model="queryParams.recruitmentTitle"
          placeholder="请输入招新标题"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 操作按钮 -->
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="small"
          @click="handleExport"
        >导出</el-button>
      </el-col>
      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <!-- 申请列表 -->
    <el-table v-loading="loading" :data="applicationList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="申请ID" align="center" prop="applicationId" />
      <el-table-column label="学生姓名" align="center" prop="studentName" />
      <el-table-column label="招新标题" align="center" prop="recruitmentTitle" :show-overflow-tooltip="true" />
      <el-table-column label="申请内容" align="center" prop="applicationContent" :show-overflow-tooltip="true" />
      <el-table-column label="申请状态" align="center" prop="status">
        <template #default="{ row }">
          <el-tag :type="row.status === '0' ? 'info' : (row.status === '1' ? 'warning' : (row.status === '2' ? 'success' : 'danger'))">
            {{ row.status === '0' ? '待审核' : (row.status === '1' ? '面试中' : (row.status === '2' ? '已通过' : (row.status === '4' ? '已取消' : '已拒绝'))) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="面试评分" align="center" prop="score">
        <template #default="{ row }">
          <span v-if="row.score">{{ row.score }}分</span>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column label="申请时间" align="center" prop="createTime" width="180">
        <template #default="{ row }">
          <span>{{ parseTime(row.createTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="审核时间" align="center" prop="reviewTime" width="180">
        <template #default="{ row }">
          <span>{{ parseTime(row.reviewTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="200">
        <template #default="{ row }">
          <el-button
            size="small"
            type="text"
            icon="el-icon-view"
            @click="handleView(row)"
          >查看</el-button>
          <el-button
            v-if="row.status === '0'"
            size="small"
            type="text"
            icon="el-icon-check"
            @click="handleApprove(row)"
          >通过</el-button>
          <el-button
            v-if="row.status === '0'"
            size="small"
            type="text"
            icon="el-icon-close"
            @click="handleReject(row)"
          >拒绝</el-button>
          <el-button
            v-if="row.status === '1'"
            size="small"
            type="text"
            icon="el-icon-edit"
            @click="handleInterview(row)"
          >面试</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 查看申请详情对话框 -->
    <el-dialog title="申请详情" :visible.sync="viewOpen" width="800px" append-to-body>
      <div v-if="viewData" class="application-detail">
        <el-descriptions :column="2" border>
          <el-descriptions-item label="学生姓名">{{ viewData.studentName }}</el-descriptions-item>
          <el-descriptions-item label="招新标题">{{ viewData.recruitmentTitle }}</el-descriptions-item>
          <el-descriptions-item label="申请状态">
            <dict-tag :options="dict.type.application_status" :value="viewData.status"/>
          </el-descriptions-item>
          <el-descriptions-item label="面试评分">
            <span v-if="viewData.score">{{ viewData.score }}分</span>
            <span v-else>-</span>
          </el-descriptions-item>
          <el-descriptions-item label="申请时间">{{ parseTime(viewData.createTime) }}</el-descriptions-item>
          <el-descriptions-item label="审核时间">{{ parseTime(viewData.reviewTime) }}</el-descriptions-item>
          <el-descriptions-item label="审核人">{{ viewData.reviewBy || '-' }}</el-descriptions-item>
        </el-descriptions>
        <div style="margin-top: 20px;">
          <h4>申请内容</h4>
          <p>{{ viewData.applicationContent }}</p>
          <h4 v-if="viewData.reviewResult">审核结果</h4>
          <p v-if="viewData.reviewResult">{{ viewData.reviewResult }}</p>
          <h4 v-if="viewData.feedback">反馈意见</h4>
          <p v-if="viewData.feedback">{{ viewData.feedback }}</p>
        </div>
      </div>
    </el-dialog>

    <!-- 审核对话框 -->
    <el-dialog :title="reviewTitle" :visible.sync="reviewOpen" width="600px" append-to-body>
      <el-form ref="reviewForm" :model="reviewForm" :rules="reviewRules" label-width="100px">
        <el-form-item label="审核结果" prop="status">
          <el-radio-group v-model="reviewForm.status">
            <el-radio label="2">通过</el-radio>
            <el-radio label="3">拒绝</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="审核意见" prop="reviewComment">
          <el-input v-model="reviewForm.reviewComment" type="textarea" :rows="4" placeholder="请输入审核意见" />
        </el-form-item>
        <el-form-item label="评分" prop="reviewScore" v-if="reviewForm.status === '2'">
          <el-input-number v-model="reviewForm.reviewScore" :min="0" :max="100" placeholder="请输入评分" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitReview">确 定</el-button>
        <el-button @click="cancelReview">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 面试评价对话框 -->
    <el-dialog title="面试评价" :visible.sync="interviewOpen" width="600px" append-to-body>
      <el-form ref="interviewForm" :model="interviewForm" :rules="interviewRules" label-width="100px">
        <el-form-item label="面试评分" prop="score">
          <el-input-number v-model="interviewForm.score" :min="0" :max="100" placeholder="请输入面试评分" />
        </el-form-item>
        <el-form-item label="面试结果" prop="result">
          <el-radio-group v-model="interviewForm.result">
            <el-radio label="2">通过</el-radio>
            <el-radio label="3">不通过</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="反馈意见" prop="feedback">
          <el-input v-model="interviewForm.feedback" type="textarea" :rows="4" placeholder="请输入反馈意见" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitInterview">确 定</el-button>
        <el-button @click="cancelInterview">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { 
  getApplication, 
  reviewApplication,
  batchReviewApplications,
  getApplicationsByClub,
  getApplicationStatistics
} from '@/api/campus/club/application'
import { getMyClubContext } from '@/api/campus/club/clubInfo'
import { download } from '@/utils/request'
import { parseTime } from '@/utils/ruoyi'

export default {
  name: 'ApplicationReview',
  dicts: ['application_status'],
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 申请表格数据
      applicationList: [],
      // 是否显示查看弹出层
      viewOpen: false,
      // 是否显示审核弹出层
      reviewOpen: false,
      // 是否显示面试弹出层
      interviewOpen: false,
      // 查看数据
      viewData: null,
      // 审核标题
      reviewTitle: '',
      // 当前审核的申请ID
      currentApplicationId: null,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        studentName: null,
        status: null,
        recruitmentTitle: null
      },
      // 审核表单
      reviewForm: {
        status: '2',
        reviewComment: '',
        reviewScore: null
      },
      // 面试表单
      interviewForm: {
        score: null,
        result: '2',
        feedback: ''
      },
      // 审核表单校验
      reviewRules: {
        status: [
          { required: true, message: '请选择审核结果', trigger: 'change' }
        ],
        reviewComment: [
          { required: true, message: '请输入审核意见', trigger: 'blur' }
        ]
      },
      // 面试表单校验
      interviewRules: {
        score: [
          { required: true, message: '请输入面试评分', trigger: 'blur' }
        ],
        result: [
          { required: true, message: '请选择面试结果', trigger: 'change' }
        ],
        feedback: [
          { required: true, message: '请输入反馈意见', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    /** 查询申请列表 */
    async getList() {
      this.loading = true
      try {
        const ctx = await getMyClubContext()
        const clubId = ctx?.data?.clubId
        
        // 检查clubId是否有效，避免调用API时出现null值
        if (!clubId) {
          this.applicationList = []
          this.total = 0
          this.loading = false
          return
        }
        
        // 优先使用getApplicationsByClub API来避免权限问题
        getApplicationsByClub(clubId).then(response => {
          const applications = response.data || []
          // 应用客户端过滤
          const filteredList = this.filterApplications(applications)
          this.applicationList = filteredList
          this.total = filteredList.length
          this.loading = false
        }).catch(error => {
          console.error('获取申请列表失败:', error)
          this.applicationList = []
          this.total = 0
          this.loading = false
        })
      } catch (error) {
        console.error('获取社团上下文失败:', error)
        this.applicationList = []
        this.total = 0
        this.loading = false
      }
    },
    
    /** 客户端过滤申请数据 */
    filterApplications(applications) {
      if (!applications || !Array.isArray(applications)) {
        return []
      }
      
      return applications.filter(app => {
        // 学生姓名过滤
        if (this.queryParams.studentName && 
            !app.studentName?.toLowerCase().includes(this.queryParams.studentName.toLowerCase())) {
          return false
        }
        
        // 申请状态过滤
        if (this.queryParams.status !== null && 
            this.queryParams.status !== undefined && 
            this.queryParams.status !== '' && 
            String(app.status) !== String(this.queryParams.status)) {
          return false
        }
        
        // 招新标题过滤
        if (this.queryParams.recruitmentTitle && 
            !app.recruitmentTitle?.toLowerCase().includes(this.queryParams.recruitmentTitle.toLowerCase())) {
          return false
        }
        
        return true
      })
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置表单 */
    resetForm(formName) {
      if (this.$refs[formName]) {
        this.$refs[formName].resetFields()
      }
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm')
      this.handleQuery()
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      console.log('选中的数据:', selection)
      this.ids = selection.map(item => item.applicationId)
      this.single = selection.length !== 1
      this.multiple = selection.length === 0
      console.log('更新选中状态 - ids数量:', this.ids.length, 'single:', this.single, 'multiple:', this.multiple)
    },
    /** 查看按钮操作 */
    handleView(row) {
      console.log('查看申请详情:', row.applicationId)
      // 使用深拷贝避免数据引用问题
      this.viewData = JSON.parse(JSON.stringify(row))
      // 强制打开查看对话框
      this.viewOpen = true
    },
    /** 通过按钮操作 */
    handleApprove(row) {
      console.log('通过申请:', row.applicationId)
      // 确保状态值为字符串格式并验证状态
      const statusValue = String(row.status)
      if (statusValue !== '0') {
        console.error('状态错误，当前状态:', statusValue)
        // 使用更通用的消息提示方式
        if (this.$message) {
          this.$message.error('只能审核待审核状态的申请')
        } else {
          alert('只能审核待审核状态的申请')
        }
        return
      }
      const doApprove = async () => {
        try {
          const data = {
            applicationId: row.applicationId,
            status: '2',
            reviewComment: '审核通过',
            reviewScore: null
          }
          console.log('立即通过申请:', data)
          await reviewApplication(data)
          this.$message ? this.$message.success('已通过') : alert('已通过')
          this.getList()
        } catch (e) {
          console.error('通过失败:', e)
          this.$message ? this.$message.error(e?.message || '操作失败') : alert(e?.message || '操作失败')
        }
      }
      if (this.$modal?.confirm) {
        this.$modal.confirm('确认通过该申请吗？').then(doApprove).catch(() => {})
      } else {
        doApprove()
      }
    },
    /** 拒绝按钮操作 */
    handleReject(row) {
      console.log('拒绝申请:', row.applicationId)
      // 确保状态值为字符串格式并验证状态
      const statusValue = String(row.status)
      if (statusValue !== '0') {
        console.error('状态错误，当前状态:', statusValue)
        // 使用更通用的消息提示方式
        if (this.$message) {
          this.$message.error('只能审核待审核状态的申请')
        } else {
          alert('只能审核待审核状态的申请')
        }
        return
      }
      const doReject = async () => {
        try {
          const data = {
            applicationId: row.applicationId,
            status: '3',
            reviewComment: '审核拒绝',
            reviewScore: null
          }
          console.log('立即拒绝申请:', data)
          await reviewApplication(data)
          this.$message ? this.$message.success('已拒绝') : alert('已拒绝')
          this.getList()
        } catch (e) {
          console.error('拒绝失败:', e)
          this.$message ? this.$message.error(e?.message || '操作失败') : alert(e?.message || '操作失败')
        }
      }
      if (this.$modal?.confirm) {
        this.$modal.confirm('确认拒绝该申请吗？').then(doReject).catch(() => {})
      } else {
        doReject()
      }
    },
    /** 面试按钮操作 */
    handleInterview(row) {
      console.log('面试评价申请:', row.applicationId)
      // 确保状态值为字符串格式并验证状态
      const statusValue = String(row.status)
      if (statusValue !== '1') {
        console.error('状态错误，当前状态:', statusValue)
        // 使用更通用的消息提示方式
        if (this.$message) {
          this.$message.error('只能对面试中状态的申请进行面试评价')
        } else {
          alert('只能对面试中状态的申请进行面试评价')
        }
        return
      }
      // 设置当前面试的申请ID
      this.currentApplicationId = row.applicationId
      // 重置面试表单
      this.interviewForm = {
        score: null,
        result: '2',
        feedback: ''
      }
      // 强制打开面试对话框
      this.interviewOpen = true
    },
    /** 批量通过 */
    async handleBatchApprove() {
      console.log('批量通过申请，选中数量:', this.ids.length)
      if (this.ids.length === 0) {
        if (this.$message) {
          this.$message.warning('请至少选择一条数据');
        } else if (this.$modal) {
          this.$modal.msgWarning('请至少选择一条数据');
        } else {
          alert('请至少选择一条数据');
        }
        return;
      }
      
      // 先确认操作
      if (this.$modal?.confirm) {
        this.$modal.confirm('是否确认批量通过选中的申请？').then(async () => {
          // 批量通过使用状态值 '2'（已通过）
          await this.performBatchOperation('2', '批量审核通过', '批量通过成功');
        }).catch(() => {
          // 用户取消操作
          console.log('用户取消批量通过');
        })
      } else {
        // 如果没有$modal，直接执行操作
        await this.performBatchOperation('2', '批量审核通过', '批量通过成功');
      }
    },
    
    /** 批量拒绝 */
    async handleBatchReject() {
      console.log('批量拒绝申请，选中数量:', this.ids.length)
      if (this.ids.length === 0) {
        if (this.$message) {
          this.$message.warning('请至少选择一条数据');
        } else if (this.$modal) {
          this.$modal.msgWarning('请至少选择一条数据');
        } else {
          alert('请至少选择一条数据');
        }
        return;
      }
      
      // 先确认操作
      if (this.$modal?.confirm) {
        this.$modal.confirm('是否确认批量拒绝选中的申请？').then(async () => {
          // 批量拒绝使用状态值 '3'（已拒绝）
          await this.performBatchOperation('3', '批量审核拒绝', '批量拒绝成功');
        }).catch(() => {
          // 用户取消操作
          console.log('用户取消批量拒绝');
        })
      } else {
        // 如果没有$modal，直接执行操作
        await this.performBatchOperation('3', '批量审核拒绝', '批量拒绝成功');
      }
    },
    
    /** 批量安排面试 */
    async handleBatchInterview() {
      console.log('批量安排面试，选中数量:', this.ids.length)
      if (this.ids.length === 0) {
        if (this.$message) {
          this.$message.warning('请至少选择一条数据');
        } else if (this.$modal) {
          this.$modal.msgWarning('请至少选择一条数据');
        } else {
          alert('请至少选择一条数据');
        }
        return;
      }
      
      // 先确认操作
      if (this.$modal?.confirm) {
        this.$modal.confirm('是否确认批量安排面试？').then(async () => {
          // 批量安排面试使用状态值 '1'（面试中）
          await this.performBatchOperation('1', '批量安排面试', '批量安排面试成功', '只能为待审核状态的申请安排面试');
        }).catch(() => {
          // 用户取消操作
          console.log('用户取消批量安排面试');
        })
      } else {
        // 如果没有$modal，直接执行操作
        await this.performBatchOperation('1', '批量安排面试', '批量安排面试成功', '只能为待审核状态的申请安排面试');
      }
    },
    
    /** 执行批量操作的通用方法 */
    async performBatchOperation(status, reviewComment, successMessage, errorMessage = null) {
      try {
        // 获取社团信息
        // 获取社团信息（仅用于过滤展示，不再随请求提交）
        const ctx = await getMyClubContext();
        const clubId = ctx?.data?.clubId;
        if (!clubId) return;

        // 验证选中的申请状态是否都为待审核
        const pendingApplications = this.applicationList.filter(app => 
          this.ids.includes(app.applicationId) && String(app.status) === '0'
        )
        
        const errorMsg = errorMessage || '只能批量处理待审核状态的申请';
        if (pendingApplications.length !== this.ids.length) {
          if (this.$message) {
            this.$message.error(errorMsg);
          } else if (this.$modal) {
            this.$modal.msgError(errorMsg);
          } else {
            alert(errorMsg);
          }
          return;
        }
        
        const data = {
          applicationIds: this.ids,
          status: status,
          reviewComment: reviewComment
        }
        console.log('调用批量审核API:', data)
        
        // 调用API
        await batchReviewApplications(data);
        
        // 显示成功消息
        if (this.$message) {
          this.$message.success(successMessage);
        } else if (this.$modal) {
          this.$modal.msgSuccess(successMessage);
        } else {
          alert(successMessage);
        }
        
        // 刷新列表并清空选择
        this.getList();
        this.ids = [];
      } catch (error) {
        console.error(`${successMessage}失败:`, error);
        const errorText = '操作失败：' + (error?.message || '未知错误');
        if (this.$message) {
          this.$message.error(errorText);
        } else if (this.$modal) {
          this.$modal.msgError(errorText);
        } else {
          alert(errorText);
        }
      }
    },
    /** 提交审核 */
    async submitReview() {
      try {
        // 先检查表单引用是否存在
        if (!this.$refs['reviewForm']) {
          console.error('审核表单引用不存在')
          if (this.$message) {
            this.$message.error('表单初始化失败，请刷新页面重试')
          } else {
            alert('表单初始化失败，请刷新页面重试')
          }
          return
        }
        
        this.$refs['reviewForm'].validate(async valid => {
          if (valid) {
            try {
              // 确保状态值为字符串格式并使用正确的值
              // '2'表示已通过，'3'表示拒绝
              const status = String(this.reviewForm.status)
              
              const data = {
                applicationId: this.currentApplicationId,
                status: status,
                reviewComment: this.reviewForm.reviewComment,
                reviewScore: this.reviewForm.reviewScore
              }
              console.log('提交审核:', data)
              
              // 调用API提交审核
              const response = await reviewApplication(data);
              
              // 显示成功消息
              if (this.$message) {
                this.$message.success('审核成功')
              } else {
                alert('审核成功')
              }
              
              // 关闭对话框并刷新列表
              this.reviewOpen = false
              this.getList()
            } catch (error) {
              console.error('提交审核失败:', error)
              if (this.$message) {
                this.$message.error('操作失败：' + (error?.message || '未知错误'))
              } else {
                alert('操作失败：' + (error?.message || '未知错误'))
              }
            }
          }
        })
      } catch (error) {
        console.error('表单验证失败:', error)
        if (this.$message) {
          this.$message.error('表单验证失败，请检查输入')
        } else {
          alert('表单验证失败，请检查输入')
        }
      }
    },
    /** 取消审核 */
    cancelReview() {
      this.reviewOpen = false
      // 确保表单引用存在再重置
      if (this.$refs['reviewForm']) {
        this.resetForm('reviewForm')
      }
    },
    /** 提交面试评价 */
    async submitInterview() {
      try {
        // 先检查表单引用是否存在
        if (!this.$refs['interviewForm']) {
          console.error('面试表单引用不存在')
          if (this.$message) {
            this.$message.error('表单初始化失败，请刷新页面重试')
          } else {
            alert('表单初始化失败，请刷新页面重试')
          }
          return
        }
        
        this.$refs['interviewForm'].validate(async valid => {
          if (valid) {
            try {
              // 依据面试结果直接设置最终状态：'2'=已通过，'3'=已拒绝
              const status = String(this.interviewForm.result)
              const data = {
                applicationId: this.currentApplicationId,
                status: status,
                reviewComment: this.interviewForm.feedback || '面试完成',
                reviewScore: this.interviewForm.score
              }
              console.log('提交面试评价(走审核接口):', data)
              await reviewApplication(data);
              
              // 显示成功消息
              if (this.$message) {
                this.$message.success('面试评价提交成功')
              } else {
                alert('面试评价提交成功')
              }
              
              // 关闭对话框并刷新列表
              this.interviewOpen = false
              this.getList()
            } catch (error) {
              console.error('提交面试评价失败:', error)
              if (this.$message) {
                this.$message.error('操作失败：' + (error?.message || '未知错误'))
              } else {
                alert('操作失败：' + (error?.message || '未知错误'))
              }
            }
          }
        })
      } catch (error) {
        console.error('表单验证失败:', error)
        if (this.$message) {
          this.$message.error('表单验证失败，请检查输入')
        } else {
          alert('表单验证失败，请检查输入')
        }
      }
    },
    /** 取消面试评价 */
    cancelInterview() {
      this.interviewOpen = false
      // 确保表单引用存在再重置
      if (this.$refs['interviewForm']) {
        this.resetForm('interviewForm')
      }
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('campus/application/export', {
        ...this.queryParams
      }, `申请信息_${new Date().getTime()}.xlsx`)
    }
  }
}
</script>

<style scoped>
.application-review {
  padding: 20px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.page-header h2 {
  margin: 0;
  color: #303133;
}

.header-actions {
  display: flex;
  gap: 10px;
}

.application-detail {
  padding: 20px 0;
}

.application-detail h4 {
  color: #303133;
  margin: 20px 0 10px 0;
}

.application-detail p {
  color: #606266;
  line-height: 1.6;
  margin: 0;
}
</style>
